<template>
	<view class="scope-container">
		<!-- <TextNavBar :title="info.title"></TextNavBar> -->
		<view class="content">
			<view class="top-c">
				<swiper autoplay class="swiper-scope">
					<swiper-item class="swi" v-for="(item, index) in info.images">
						<image :src="item" class="thumb" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
				<view class="bottom-c">
					<view class="left" hover-class="hover">
						{{info.title}}
					</view>
					<view class="price-c">
						<PriceDisplay :info="info"></PriceDisplay>/张
					</view>
				</view>

				<view class="float-price-c">
					<view v-for="(item, index) in showSkuTitleList" class="item">
						<text style="margin-right: 20rpx;">{{item.shang_title}}</text> <text
							class="stock">{{item.stock}}/{{item.total}} </text>
					</view>
					<view class="item free-order">
						<text>免单</text>
						<template v-if="info.room && info.room.free_order_total">
							<text
								class="stock">{{info.room.free_order_total - info.room.free_order_sales}}/{{info.room.free_order_total}}</text>
						</template>
						<template v-else>
							无
						</template>
					</view>
					<!-- <view v-for="(item, index) in info.skus" class="item">
						<text style="margin-right: 20rpx;">{{item.shang_title}}</text>  <text class="stock">{{item.stock}}/{{item.total}} </text>
					</view> -->
				</view>
			</view>

			<view class="body animated" :class="{bounceOutRight: startMoving, bounceInLeft: !startMoving}">
				<view class="title-c">
					<image class="all-stock" src="https://cdn2.hquesoft.com/box/yfs/new/all_stock.png" mode="widthFix">
					</image>
					<view class="stock-c">
						剩{{info.room && info.room.stock}}张/共{{info.room.total}}张
					</view>
				</view>
				<view class="sku-list">
					<view class="item" v-for="(item, index) in info.skus" :key="item.id" @tap="showSkuPopup">
						<view class="thumb">
							<view class="sell-out-c" v-if="!item.stock">
								<image mode="widthFix" class="sell-out" src="@/static/empty-stock-2.png"></image>
							</view>
							<image mode="aspectFill" :src="item.thumb + '?x-oss-process=image/resize,w_300'"></image>
							<view class="total">{{item.stock}}/{{item.total}}</view>
							<view class="shang-title" :class="{'gift': item.shang_type === 1}">{{item.shang_title}}
							</view>
						</view>
						<view class="title">{{item.title}}</view>

						<view class="display-price">
							<view class="key">零售价:</view>
							<view class="value">
								<text v-if="item.display_moneyPrice">
									{{item.display_moneyPrice / 100}}元
								</text>
								<PriceDisplay :info="info" v-else></PriceDisplay>
							</view>
						</view>
						<view class="display-price">
							<template v-if="item.shang_type === 1">
								<text>只赠不售</text>
							</template>
							<template v-else>
								<text clas="key">概率:</text>
								<text class="value">{{item.odds}}%</text>
							</template>
						</view>
					</view>
				</view>
			</view>

		</view>

		<view class="footer-c">
			<view class="small-btn-c">
				<!-- <image src="https://cdn2.hquesoft.com/box/yfs/new/tips.png" mode="heightFix" class="btn"
					@tap="showTips"></image> -->
				<image src="https://cdn2.hquesoft.com/box/yfs/new/record.png" mode="heightFix" class="btn"
					@tap="showRecordList"></image>
			</view>
			<view class="middle">

				<!-- <image class="refresh-btn" mode="widthFix" @tap="refreshRoom"
					src="https://cdn2.hquesoft.com/box/yfs/refresh.png" /> -->

				<image class="left-btn" mode="widthFix" @tap="lastRoom"
					src="https://cdn2.hquesoft.com/box/yfs/left.png" />
				<!-- 盒子箱数 -->
				<view @tap="showRoomPopup" class="long-btn"
					style="background-size: 100% 100%; background-repeat: no-repeat;">
					<span>第</span>
					<span v-if="info.room && info.room.num" class="number">{{info.room.num | fixNumber}}</span>
					<span>箱</span>
					<span>/</span>
					<span>共</span>
					<span v-if="info.roomTotal" class="number">{{info.roomTotal}}</span>
					<span>箱</span>
				</view>

				<image class="right-btn" mode="widthFix" @tap="nextRoom"
					src="https://cdn2.hquesoft.com/box/yfs/right.png" />

			</view>
			<view class="btn-c">
				<image :class="{'gray-image': !isEnableBtn(1)}" src="https://cdn2.hquesoft.com/box/yfs/new/btn1.png"
					mode="widthFix" class="btn" @tap="buy(1)"></image>
				<image :class="{'gray-image': !isEnableBtn(3)}" src="https://cdn2.hquesoft.com/box/yfs/new/btn3.png"
					mode="widthFix" class="btn" @tap="buy(3)"></image>
				<image :class="{'gray-image': !isEnableBtn(10)}" src="https://cdn2.hquesoft.com/box/yfs/new/btn10.png"
					mode="widthFix" class="btn" @tap="buy(10)"></image>
				<image :class="{'gray-image': !isEnableBtn(0)}" src="https://cdn2.hquesoft.com/box/yfs/new/btn_all.png"
					mode="widthFix" class="btn" @tap="buy(0)"></image>
			</view>
		</view>

		<PayCard :info="payInfo" @close="hidePayPopup" @success="paySuccess" v-if="isPayPopup"></PayCard>

		<RoomPopup v-if="isRoomPopup" @select="changeRoom" @close="hideRoom()" :info="info" :room="info.room">
		</RoomPopup>
		<RecordList v-if="isRecordList" @close="hideRecordList()" :info="info" :room="info.room"></RecordList>


		<uni-popup style="z-index: 1000;" ref="detailPopup" type="bottom">
			<BoxSkuPopup :skuList="info.skus" :detailImageList="info.detailImages" @close="hideSkuPopup"></BoxSkuPopup>
		</uni-popup>

		<!-- <BoxSkuPopup :skuList="info.skus" :detailImageList="info.detailImages" @close="hideSkuPopup" v-if="isShowDetail"></BoxSkuPopup> -->

		<!-- <navigator url="/pages/rule/index">
			<view class="float-btn rule" hover-class="hover">
				<image mode="aspectFill" src="@/static/smallBox/rule.png"></image>
				<text>规则</text>
			</view>
		</navigator> -->

		<navigator url="/pages/myBox/index">
			<view class="float-btn my" hover-class="hover">
				<!-- <image mode="aspectFill" src="@/static/smallBox/my-box.png"></image> -->
				<text>盒柜</text>
			</view>
		</navigator>

		<SharePopup v-if="isSharePopup" @close="hideSharePopup" :info="posterInfo"></SharePopup>

		<OpenBoxPopup :isNavbarEnable="true" :info="info" v-if="isOpenPopup" :order="order" @close="goBack"
			:boxImg="info.image_3d" />

		<FreeTicketFloatBtn v-if="info.isInviteEnabled" @useFreeTicket="useFreeTicket" :uuid="uuid"
			nodeType="yifanshang"></FreeTicketFloatBtn>

	</view>
</template>

<script>
	import PayCard from "./components/PayCard.vue"
	import RoomPopup from "./components/RoomPopup.vue"
	import RecordList from "./components/RecordList.vue"
	import OpenBoxPopup from "./components/OpenBoxPopup.vue"
	import {
		mapGetters
	} from "vuex"
	export default {
		components: {
			PayCard,
			RoomPopup,
			RecordList,
			OpenBoxPopup
		},
		data() {
			return {
				uuid: "",
				info: {
					room: {}
				},
				payTotal: 0,
				isPayPopup: false,
				isRoomPopup: false,
				startMoving: false,
				selectedRoom: {},
				isShowDetail: false,
				isOpenPopup: false, // 是否开盒
				isRecordList: false,
				isSharePopup: false,
				order: {}, // 支付成功后的订单
				roomId: ''
			}
		},
		computed: {
			...mapGetters(["userInfo"]),
			payInfo() {
				if (!this.info || !this.info.room) {
					return {}
				}

				return {
					room_id: this.info.room.id,
					pay_total: this.payTotal,
					title: this.info.title,
					moneyPrice: this.info.moneyPrice,
					scorePrice: this.info.scorePrice
				}
			},
			isAllPickDisable() {
				return !this.info.last_stock_all_pick_enable || (this.info.last_stock_all_pick_enable > this.info.room
					.stock)
			},
			share() {
				return {
					title: '[第' + this.info.room.num + '箱]' + this.info.title,
					// thumb: this.info.thumb,
					path: '/pages/yifanshang/detail?uuid=' + this.info.uuid + '&roomId=' + this.info.room.id +
						'&invite_node=yifanshang-' + this.info.uuid
				}
			},
			showSkuTitleList() {
				let list = JSON.parse(JSON.stringify(this.info.skus || []))
				return list.splice(0, 6)
			},
			posterInfo() {
				return {
					moneyPrice: this.info.moneyPrice,
					scorePrice: this.info.scorePrice,
					title: this.info.title,
					path: this.getShareConfig().path,
					thumb: this.info.thumb
				}
			},
		},
		watch: {},
		filters: {
			fixNumber(val) {
				if (val < 10) {
					return '0' + val
				}
				return val
			}
		},
		onLoad(e) {
			this.uuid = e.uuid
			this.roomId = e.roomId || ''

			uni.$on('startShare', () => {
				this.isSharePopup = true
			})
		},
		onUnload() {

		},
		onPullDownRefresh() {
			this.$showPullRefresh()
			this.initData()
		},
		onShow() {
			uni.showLoading({
				title: '加载中'
			})
			this.initData().then(res => {
				uni.hideLoading()
			})
		},
		onReachBottom() {},
		methods: {
			lastRoom() {
				if (this.info.room.num === 1) {
					uni.showToast({
						title: '没有上一箱了~',
						icon: 'none'
					})
					return false
				}
				this.changeRoom({
					id: this.roomId - 1
				})
			},
			nextRoom() {
				if (this.info.room.num == this.info.roomTotal) {
					uni.showToast({
						title: '没有下一箱了~',
						icon: 'none'
					})
					return false
				}
				this.changeRoom({
					id: this.roomId + 1
				})
			},
			// 使用1次兑换记录
			useFreeTicket() {
				uni.showLoading({
					title: '提交中',
					icon: 'none'
				})

				this.$http('/yifanshang/orders', 'POST', {
					room_id: this.info.room.id,
					pay_total: 1,
					is_use_free_ticket: 1
				}).then(res => {
					uni.hideLoading()
					let info = res.data
					if (info.is_need_pay) {
						uni.showToast({
							title: '兑换出错~',
							icon: 'none'
						})
					} else {
						this.paySuccess(info.order)
					}
				})
			},
			hideSharePopup() {
				this.isSharePopup = false
			},
			isEnableBtn(total) {
				// 抽*发按钮是否可用
				let flag = true

				if (total === 0) {
					flag = !this.info.is_limit_1 && this.isAllPickDisable && this.info.room.stock
				} else if (total === 1) {
					flag = this.info.room && this.info.room.stock
				} else {
					flag = !this.info.is_limit_1 && this.info.room.stock
				}

				return flag
			},
			hideRecordList() {
				this.isRecordList = false
			},
			showRecordList() {
				this.isRecordList = true
			},
			showTips() {
				uni.navigateTo({
					url: '/pages/rule/index?type=yifanshang'
				})
			},
			initData() {
				return this.$http(`/yifanshangs/${this.uuid}`, 'GET', {
					room_id: this.roomId
				}).then(res => {
					this.info = res.data.info

					// this.isLike = this.info.is_liked
					this.roomId = this.info.room && this.info.room.id

					// this.isRecordList = true

					// 加载评论
					// this.initCommentList()
				})
			},
			hidePayPopup() {
				this.isPayPopup = false
			},
			showSkuPopup() {
				this.$refs.detailPopup.open('bottom')
				// this.isShowDetail = true
			},
			hideSkuPopup() {
				this.$refs.detailPopup.close()
				// this.isShowDetail = false
			},
			// 点击购买
			buy(total) {
				if (!this.isEnableBtn(total)) {
					return false
				}

				this.payTotal = total
				this.isPayPopup = true
			},
			showRoomPopup() {
				console.log('click ===')
				this.isRoomPopup = true
			},
			refreshRoom() {
				// this.showAnimate()
				// this.roomId = ''   // 删除roomid，使其随机
				uni.showLoading({
					title: '刷新中...'
				})
				this.initData().then(res => {
					uni.hideLoading()
					uni.showToast({
						title: '刷新完成~',
						icon: 'none'
					})
				})
			},
			changeRoom(room) {
				this.selectedRoom = room
				this.roomId = room.id
				this.isRoomPopup = false

				this.showAnimate()
				this.initData()
			},
			showAnimate() {
				this.startMoving = true
				setTimeout(() => {
					this.startMoving = false
				}, 300)
			},
			hideRoom() {
				this.isRoomPopup = false
			},
			paySuccess(order) {
				// 线上开盒流程
				this.isPayPopup = false
				uni.showToast({
					title: "支付成功, 抽赏中",
					icon: "none"
				})
				this.order = order
				this.isOpenPopup = true
			},
			goBack() {
				this.isOpenPopup = false
				this.initData()
			}
		},
		onPageScroll(e) {}
	}
</script>

<style lang="scss" scoped>
	// 字的颜色
	uni-page-body {
		f1d3a8: #fff;
		color: #f1d3a8;
		font-size: 16px;
	}

	page {
		background-color: #151515;
	}

	.scope-container {
		// padding-top: 150rpx;
		min-height: 100vh;
		box-sizing: border-box;
	}

	.float-btn {
		position: fixed;
		right: 0rpx;
		top: 260rpx;
		width: 130rpx;
		height: 66rpx;
		background: #FFEFB3;
		border-radius: 33px 0px 0px 33px;
		padding: 0rpx 14rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-around;

		font-weight: 500;
		font-size: 24rpx;

		image {
			width: 30rpx;
			height: 36rpx;
		}

		&.my {
			top: 150rpx;

			image {
				width: 30rpx;
				height: 40rpx;
			}
		}

		&.share {
			top: 800rpx;

			.icon-wechat {
				font-size: 40rpx;
			}
		}
	}

	.top-c {
		width: 750rpx;
		height: 360rpx;
		// border: 1px solid red;
		// position: absolute;
		position: relative;
		// top: 142rpx;
		// left: 92rpx;
		// border-radius: 10rpx;
		// margin: 400rpx auto 0rpx auto;
		overflow: hidden;

		box-shadow: 0px 20rpx 52rpx 0px rgba(143, 143, 143, 0.1);

		.swiper-scope {
			overflow: hidden;
			width: 100%;
			height: 100%;

			swiper-item {
				width: 100%;
				height: 100%;
			}

			.thumb {
				width: 100%;
				height: 100%;
			}
		}

		.float-price-c {
			background: rgba(0, 0, 0, 0.6);
			position: absolute;
			top: 0rpx;
			left: 0rpx;
			color: white;
			font-weight: 700;
			font-size: 26rpx;
			padding: 10rpx 30rpx;
			border-radius: 4rpx;
			// z-index: 100;

			.item {
				display: flex;
				justify-content: space-between;
			}

			.free-order {
				color: red;
			}
		}

		.bottom-c {
			// background: url('@/static/activity/shadow.png');
			background-repeat: no-repeat;
			background-size: 110% auto;
			background-position: -10rpx bottom;
			width: 100%;
			height: 300rpx;
			// border: 1px solid red;
			position: absolute;
			bottom: 0rpx;
			left: 0rpx;
			pointer-events: none;
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			color: white;
			font-weight: 500;
			font-size: 26rpx;
			padding: 20rpx 20rpx;
			box-sizing: border-box;

			.yellow-font {
				color: #FFEA06;
			}
		}
	}

	.body {
		width: 100%;
		// height: 60vh;
		// border: 1px solid red;
		position: relative;

		.title-c {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.all-stock {
				width: 280rpx;
			}

			.stock-c {
				margin-right: 26rpx;
				font-weight: 500;
				font-size: 32rpx;
			}
		}

		padding-bottom: 430rpx;

		.sku-list {
			overflow: hidden;
			// position: absolute;
			// left: 25rpx;
			// margin: 0rpx auto;
			// border: 1px solid red;
			// top: 466rpx;
			// border: 1px solid red;
			width: 726rpx;
			// height: 1000rpx;
			margin-left: 12rpx;

			// height: 50vh;
			// padding: 20rpx 0rpx;
			// box-sizing: border-box;
			.item {
				float: left;
				margin-left: 12rpx;
				// margin-bottom: 22rpx;
				margin-top: 22rpx;
				width: 166rpx;
				height: 380rpx;
				box-sizing: border-box;
				border: 1rpx solid #f1f1f1;
				border-radius: 12rpx;

				.thumb {
					position: relative;
					overflow: hidden;
					background: rgba(0, 0, 0, 0.5);
					border-radius: 12rpx;
					position: relative;

					// background: url('@/static/activity/shadow.png');
					// background-repeat: no-repeat;
					// background-size: 100% auto;
					// background-position: 0rpx bottom;

					image {
						width: 166rpx;
						height: 166rpx;
						height: 250rpx;
						border-radius: 10rpx;
						overflow: hidden;
						display: block;
					}

					.sell-out-c {
						position: absolute;
						width: 100%;
						height: 100%;
						background: rgba(0, 0, 0, 0.5);
						display: flex;
						align-items: center;
						justify-content: center;

						.sell-out {
							width: 90rpx;
							height: 90rpx;
						}
					}

					.total {
						background: rgba(0, 0, 0, 0.5);
						border-radius: 6rpx;
						padding: 2rpx 10rpx;
						color: white;
						position: absolute;
						top: 10rpx;
						left: 0rpx;
						z-index: 100;
						font-size: 20rpx;
						font-weight: bold;
					}

					.shang-title {
						background: #FFD223;
						border-radius: 6rpx;
						padding: 2rpx 10rpx;
						color: white;
						position: absolute;
						bottom: 10rpx;
						right: 10rpx;
						z-index: 100;
						font-size: 20rpx;
						font-weight: bold;

						&.gift {
							background: #F15858;
						}
					}
				}

				.display-price {
					font-size: 22rpx;
					font-family: PingFang;
					font-weight: 500;
					// color: #000000;
					display: flex;
					// justify-content: space-between;
				}

				.title {
					font-size: 24rpx;
					font-family: PingFang;
					font-weight: bold;
					color: #f1d3a8;
					width: 166rpx;
					text-align: center;
					margin-top: 10rpx;

					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
				}
			}
		}
	}

	.footer-c {
		position: fixed;
		bottom: 0rpx;
		// border: 1px solid red;
		width: 100%;
		background: #151515;
		padding-bottom: 60rpx;
	}

	.small-btn-c {
		text-align: center;
		font-size: 24rpx;
		font-family: PingFang;
		font-weight: 500;
		color: #A67C1D;
		line-height: 40rpx;
		padding: 30rpx 120rpx 0rpx 120rpx;
		width: 700rpx;
		box-sizing: border-box;

		border-top: 1px solid #F3F3F5;

		margin: 0rpx auto 30rpx auto;

		display: flex;
		justify-content: space-around;

		.btn {
			height: 30rpx;
		}
	}

	.middle {
		display: flex;
		// align-items: center;
		// align-items: center;
		// justify-content: center;
		align-items: center;
		justify-content: center;
		z-index: 100;
		position: relative;
		padding: 0rpx 30rpx;

		.left-btn {
			width: 100rpx;
			flex: 0 100rpx;
			// flex: 1;
			height: 100rpx;
			// margin-left: 10rpx;
		}

		.refresh-btn {
			position: absolute;
			right: 0rpx;
			top: -160rpx;
			width: 140rpx;
			height: 140rpx;
		}

		.long-btn {
			width: 580rpx;
			// flex: 1;
			height: 90rpx;
			line-height: 90rpx;
			position: relative;
			// border: 1px solid red;
			// display: flex;

			// font-weight: 500;
			font-size: 28rpx;
			text-align: center;

			.number {
				font-weight: 500;
				font-size: 40rpx;
				margin: 0rpx 10rpx;
			}
		}

		.right-btn {
			width: 100rpx;
			flex: 0 100rpx;
			// flex: 1;
			height: 100rpx;
			margin-left: 10rpx;
		}
	}

	.btn-c {
		width: 700rpx;
		margin: 20rpx auto 0rpx auto;
		// margin-top: 20rpx;
		display: flex;
		justify-content: space-between;

		.btn {
			width: 172rpx;
			flex: 0 0 172rpx;
		}
	}
</style>